<template>
	<view>
		<u-form :model="addressParams" ref="uForm">

			<!-- 名字 -->
			<u-form-item label="昵称" label-width="160rpx" prop="name"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<u-input v-model="addressParams.name" placeholder="请输入姓名"
					:custom-style="{fontSize:'16rpx',color:'#000',textAlign:'right',paddingRight:'50rpx'}" />
			</u-form-item>
			<!-- 手机号 -->
			<u-form-item label="手机号" label-width="160rpx" prop="tel"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<u-input v-model="addressParams.tel" placeholder="请输入手机号"
					:custom-style="{fontSize:'16rpx',color:'#000',textAlign:'right',paddingRight:'50rpx'}" />
			</u-form-item>

			<!-- 地址 -->
			<u-form-item label="地址" label-width="160rpx" prop="addr_text"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<view v-if="addressParams.addr_text" style="paddingRight: 50rpx" class="uni-input" @click="flag=true">{{addressParams.addr_text}}</view>
				<view v-else class="uni-input" style="paddingRight: 50rpx" @click="flag=true">请选择地址</view>
				<AddressSelected v-model:flag="flag" :addr_code="addressParams.addr_code" @changeAddress="changeAddress"></AddressSelected>
			</u-form-item>
			<!-- / 详细地址 -->
			<u-form-item prop="detail">
				<u-input v-model="addressParams.detail" type="textarea" placeholder="请输入详细地址"
					:custom-style="{fontSize:'16rpx',color:'#000',paddingLeft: '30rpx', paddingRight:'50rpx'}" />
			</u-form-item>
			<u-form-item label="设置默认地址" label-width="250rpx"
				:label-style="{color:'#000',fontSize: '16rpx',marginLeft:'30rpx'}">
				<u-switch v-model="addressParams.is_default" style="margin-right: 50rpx;"></u-switch>
			</u-form-item>
		</u-form>
		<view class="btn">
			<u-button :loading="btnFlag" @click="sure" :custom-style="{backgroundColor:'#fdd100',color:'#fff'}" hover-class="none">确定</u-button>
		</view>
	</view>
</template>

<script>
	import rules from './saveAddressRules.js'
	import { order } from '@/api'
	import { userStore } from '@/stores/userInfo/userInfo'
	import AddressSelected from '@/components/areadata/AddressSelected.vue'
 	export default {
		data() {
			return {
				addressParams: {
					name: '',
					tel: '',
					addr_text: '',
					addr_code: [],
					detail: '',
					is_default: false,
					uid: '',
					addr_id: ''
				},
				address: '',
				btnFlag: false,
				rules,
				flag: false
			}
		},
		components: {
			AddressSelected
		},
		onLoad(options) {
			if(options.address) {
				let address  = JSON.parse(options.address)
				this.address = address.addr_code[2]
				this.addressParams = {...this.addressParams,...address,addr_id: address._id}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				 //这是修改后的导航栏文字
				title: this.addressParams.addr_id?'修改地址':'新增地址'
			})
			// 校验
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			changeAddress(e) {
				this.addressParams.addr_text  = ''
				this.addressParams.addr_code = []
				this.addressParams.addr_code.push(...e.address)
				this.addressParams.addr_text = e.address_text
			},
			// 地址
			onchange(e) {
				let { detail } = e
				if(detail.value.lenght === 0) {
					this.addressParams.addr_text= ''
					return 
				}
				let addressCode = []
				this.addressParams.addr_text = ''
				detail.value.forEach(v => {
					this.addressParams.addr_text += v.text
					addressCode.push(v.value)
				})
				this.addressParams.addr_code = addressCode
				this.address = addressCode[2]
			},
			onnodeclick(node) {},
			sure() {
				let user = userStore()
				this.$refs.uForm.validate((valid) => {
					if(valid){
						this.addressParams.uid = user.userInfo._id
						this.btnFlag = true
						if(!this.addressParams.addr_id) {
							delete this.addressParams.addr_id
						}
						order.reqSaveAddress(this.addressParams).then(res => {
							if(res.code === 1) {
								this.btnFlag = true
								uni.$u.toast(`${this.addressParams.addr_id?'修改成功':'添加成功'}`)
								setTimeout(() => {
									uni.navigateBack()
								},500)
							} else{
								uni.$u.toast(`${this.addressParams.addr_id?'修改失败':'添加失败'}`)
							}
						})
					}else {
						console.log(123)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .input-value-border {
		border: none;
		text-align: right;
	}

	::v-deep .selected-area {
		display: block;
	}

	::v-deep .selected-list {
		justify-content: flex-end;
	}

	::v-deep .text-color {
		color: #000;
	}

	::v-deep .uni-input-placeholder {
		line-height: 50rpx !important;
	}

	::v-deep .input-arrow {
		display: none;
	}

	::v-deep .u-form-item--right__content__slot {
		justify-content: flex-end;
	}
	.btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		&:active{
			opacity: 0.5;
		}
	}
</style>
